<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>homePage</title>
    <link rel="stylesheet" type="text/css" th:href="@{/js/plugins/layui-v2.6.8/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/banner/iconfont/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/banner/common.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/banner/banner.css}"/>
</head>

<body>
<div class="container">
    <div class="dataOutBox layui-card">
        <div class="layui-card-body com-flex">
            <div class="dataBox com-flex">
                <div class="dataItem com-flex">
                    <img th:src="@{/img/banner/yangzhihu.png}"/>
                </div>
                <div class="dataItem com-flex">
                    <p>养殖户总数</p>
                    <p><span>20</span>户</p>
                </div>
                <div class="dataItem com-flex">
                    <p>本月新增</p>
                    <p><span>2</span>户</p>
                </div>
            </div>
            <div class="dataBox com-flex">
                <div class="dataItem com-flex">
                    <img th:src="@{/img/banner/jizhan.png}"/>
                </div>
                <div class="dataItem com-flex">
                    <p>基站总数</p>
                    <p><span>47</span></p>
                </div>
                <div class="dataItem com-flex">
                    <p>在线</p>
                    <p><span>30</span></p>
                </div>
                <div class="dataItem com-flex">
                    <p>离线</p>
                    <p><span>17</span></p>
                </div>
            </div>
            <div class="dataBox com-flex">
                <div class="dataItem com-flex">
                    <img th:src="@{/img/banner/dongwu.png}"/>
                </div>
                <div class="dataItem com-flex">
                    <p>动物总数</p>
                    <p><span>48790</span>头</p>
                </div>
                <div class="dataItem com-flex">
                    <p>在栏</p>
                    <p><span>3000</span>头</p>
                </div>
                <div class="dataItem com-flex">
                    <p>出栏</p>
                    <p><span>47</span>头</p>
                </div>
                <div class="dataItem com-flex">
                    <p>耗损</p>
                    <p><span>47</span>头</p>
                </div>
            </div>
            <div class="dataBox com-flex">
                <div class="dataItem com-flex">
                    <img th:src="@{/img/banner/yujing.png}"/>
                </div>
                <div class="dataItem com-flex">
                    <p>预警次数</p>
                    <p><span>378</span>次</p>
                </div>
                <div class="dataItem com-flex">
                    <p>本月</p>
                    <p><span>45</span>次</p>
                </div>
                <div class="dataItem com-flex">
                    <p>今日</p>
                    <p><span>8</span>次</p>
                </div>
            </div>
        </div>
    </div>
    <div class="chartOutBox com-flex">
        <div class="chartOutBox-l com-flex">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="dataChart" id="chart1"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="dataChart" id="chart2"></div>
                </div>
            </div>
        </div>
        <div class="chartOutBox-r">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="dataChart" id="chart3"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="tableOutBox com-flex">
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="header-title">预警列表</span>
                <a class="header-more">更多>></a>
            </div>
            <div class="layui-card-body">
                <div class="tableBox table1">
                    <table id="table1"></table>
                </div>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">
                <span class="header-title">基站列表</span>
                <a class="header-more">更多>></a>
            </div>
            <div class="layui-card-body">
                <div class="tableBox table2">
                    <table id="table2"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/plugins/layui-v2.6.8/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/plugins/echarts/echarts.common.min.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/banner/banner.js}" type="text/javascript" charset="utf-8"></script>
<!--<script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>-->
<script th:src="@{/js/lay/modules/jquery.js?v=2.1.4}"></script>
</body>

</html>
